import React from "react";
import { Select, Table } from "antd";
const card = () => {
    const list = [
        {
            id: 0,
            firstName: 1,
            lastName: 1,
            item: 1,
            select: {
                options : [1, 2, 3],
                defaultItem: 1
            }
        },
        {
            id: 1,
            firstName: 2,
            lastName: 4,
            item: 1,
            select: {
                options : [1, 2, 3],
                defaultItem: 1
            }
        },
        {
            id: 2,
            firstName: 3,
            lastName: 2,
            item: 1,
            select: {
                options : [1, 2, 3],
                defaultItem: 2
            }
        },
        {
            id: 3,
            firstName: 4,
            lastName: 3,
            item: 1,
            select: {
                options : [1, 2, 3],
                defaultItem: 1
            }
        },
    ]
    const handleChange = (value, id) => {
        const updateList = list.map((item) => {
            if (id === item.id) {
                return { ...item, select: { options: item.select.options, defaultItem: value }}
            } else {
                return { ...item }
            }
        })
        console.log(updateList);
    }
    const columns = [
        {
            title: 'firstName',
            dataIndex: 'firstName',
            key: 'firstName'
        },
        {
            title: 'lastName',
            dataIndex: 'lastName',
            key: 'lastName'
        },
        {
            title: 'select',
            dataIndex: 'select',
            key: 'select',
            render: (text, record) => {
                return (
                    <Select value={text.defaultItem} onChange={(value) => handleChange(value, record.id)}>
                        {
                            text.options.map((item => {
                                return <Select.Option key={item}>{item}</Select.Option>
                            }))
                        }
                    </Select>
                )
            }
        },
    ]

    return (
        <Table dataSource={list} pagination={false} columns={columns} />
    )
}

export default card